/*
* Created on Tue Jun 13 2023 by Admin
*
* Copyright (c) 2023 shuangdi
*
* description: CStep
*
* date: 2025/3/19
*/
<template>
  <div class="root_step">
    <div class="radio_box">
      <el-radio-group v-model="radioValue" @change="changeRadio">
        <el-radio :value="1" size="large">
          <span style="font-size: 16px">从本体库选择</span>
        </el-radio>
        <el-radio :value="2" size="large">
          <span style="font-size: 16px">手动创建本体</span>
        </el-radio>
      </el-radio-group>
    </div>
    <div class="graph_box">
      <div class="s_graph_box" v-show="radioValue === 1">
        <ontology-base ref="ontologyBaseDom"></ontology-base>
      </div>
      <div class="s_graph_box" v-show="radioValue === 2">
        <AntV ref="AntVDom"></AntV>
      </div>
    </div>
    <attribute-panel id="attributePane" @save-data="saveData" ref="attributePaneDom"/>
  </div>
</template>

<script setup>
import {nextTick, onMounted, ref} from "vue";
import AntV from '@/components/graph/index.vue'
import AttributePanel from "@/components/attributePanel.vue";
import {graphExample} from "@/components/graph/config/main.js";
import emitter from "@/utils/emitter.js";
import OntologyBase from "@/components/ontologyBase.vue";

let radioValue = ref(1)
let AntVDom = ref(null)
let selectNode = ref(null)
let attributePaneDom = ref(null)
let isInitGraph = ref(false)
let ontologyBaseDom = ref(null)

// 初始化图谱
async function readyGraph() {
  const data = {
    data: {
      nodes: [],
      edges: []
    },
    optionsConfig: {
      isNewData: true,
      bindNodeClick: true,
      layout: "d3Force",
      padding: [80, 80, 80, 80],
      animation: false,
      defaultNodeSize: 34,
      defaultLabelSize: 16,
      defaultNodeFill: '#6865cb',
      behaviors: ["createEdge", 'createNode']
    },
    configuration: {
      edgeLabel: null,
      edgeId: null,
      nodeId: "id",
      nodeLabel: "label",
      source: "source",
      target: "target",
      nodeType: 'nodeType'
    }
  }
  AntVDom.value.initGraph(data);
}

// 初始化mitt
function initMitt() {
  // 显示属性面板
  emitter.on('showAttributePanel', (item) => {
    // 编辑节点
    if (item.key === 'edit') {
      let attributePane = document.getElementById('attributePane')
      attributePane.style.visibility = 'visible'
      selectNode.value = item.elementData
      attributePaneDom.value.settingAttribute({
        nodeType: item.elementData.config.style.labelText,
        nodeColor: item.elementData.config.style.fill,
      })
    }
    // 删除节点
    if (item.key === 'delete') {
      if (item.elementData.type === 'node') {
        // 删除节点
        graphExample.removeNodeData([item.elementData.id])
      } else {
        graphExample.removeEdgeData([item.elementData.id])
      }
      graphExample.draw()
    }
  })
}

// 切换radio
function changeRadio() {
  // 隐藏面板
  const attributePane = document.getElementById('attributePane')
  attributePane.style.visibility = 'hidden'
  if (radioValue.value === 2 && isInitGraph.value === false) {
    nextTick().then(() => {
      isInitGraph.value = true
      // 初始化图谱
      readyGraph()
    })
  }
}

// 报存数据
function saveData(item) {
  selectNode.value.config.style.labelText = item.nodeType
  selectNode.value.config.style.fill = item.nodeColor
  graphExample.updateNodeData([selectNode.value.config])
  graphExample.draw()
  const attributePane = document.getElementById('attributePane')
  attributePane.style.visibility = 'hidden'
  attributePaneDom.value.resetFormState()
}

onMounted(() => {
  initMitt()
  // 初始化图谱
  readyGraph()
})
</script>

<style scoped>
.root_step {
  width: 100%;
  height: 100%;

  .radio_box {
    height: 60px;
    background: #ececec;
    display: flex;
    align-items: center;
    padding: 0 20px;
  }

  .graph_box {
    box-sizing: border-box;
    padding: 16px 0;
    height: calc(100% - 60px);
    width: 100%;

    .s_graph_box {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}

</style>
